<template>
	<view class="container">
			<image src="../../static/img/banner.png" class="banner"></image>
			<image src="../../static/img/indextext.png" class="indextext"></image>
			<view class="doubt">
				<view class="title">
					<uni-icons type="chat" size="20" class="icon"></uni-icons><text class="doubtTitle">有疑问？ 帮你快速解答</text>
					<text class="round"></text>
				</view>
				<view class="question">
					<text class="question1">Q1</text>
					<text class="question2">申请条件是什么？</text>	
					<view>年龄在20-50岁的中国公民,均可申请。</view>
				</view>
				<view class="question">
					<text class="question1">Q2</text>
					<text class="question2">我需要准备哪些资料？</text>	
					<view>本人身份证、银行卡（仅用于收款）、手机号码。</view>
				</view>
				<view class="question">
					<text class="question1">Q3</text>
					<text class="question2">借款后，如何还款</text>	
					<view>支持每月还款日自动扣款，您也可以通过APP进行手动还款。</view>
				</view>
			</view>
			<view class="procedure">
				<view>
					<image src="../../static/img/xinyong.png"></image>
					<text>APP申请大数据授信</text>
				</view>
				<view >
					<image src="../../static/img/zhengxin.png"></image>
					<text>急速审核当天到账</text>
				</view>
				<view >
					<image src="../../static/img/dianzan.png"></image>
					<text>借款灵活 还款无压力</text>
				</view>
			</view>
			<button class="submitbtn" @click="submit" >提交申请</button>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	export default {
		components: {uniIcons},
		data() {
			return {
				href: 'https://uniapp.dcloud.io/collocation/pages?id=easycom'
			}
		},
		methods: {
			submit(){
				uni.redirectTo({
				    url: '../loan/index'
				});
			}
		}
	}
</script>

<style scoped>
	.container{
		text-align: center;
	}
	.banner{
		width: 732rpx;
		height: 398rpx;
	}
	.indextext{
		width: 732rpx;
		height: 428rpx;
	}
	.doubt{
		margin:44rpx 0 ;
	}
	.icon{
		margin-right: 10rpx;
	}
	.doubtTitle{
		position: relative;
		font-size: 36rpx;
		font-weight: 700;
		
	}
	.doubtTitle::before{
		content: '';
		position: absolute;
		top: 27rpx;
		left: -150rpx;
		width: 80rpx;
		height: 2rpx;
		background: linear-gradient(to right, #fff, #968e79);
	}
	.doubtTitle::after{
		content: '';
		position: absolute;
		top: 27rpx;
		right: -105rpx;
		width: 80rpx;
		height: 2rpx;
		background: linear-gradient(to left, #fff, #968e79);
	}
	.round{
		position: relative;
	}
	.round::before{
		content: '';
		position: absolute;
		top: 19rpx;
		left: -415rpx;
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background: #968e79;
	}
	.round::after{
		content: '';
		position: absolute;
		top: 19rpx;
		right: -17rpx;
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background: #968e79;
	}
	.question{
		margin: 40rpx 0;
		height: 100rpx;
		padding: 40rpx 40rpx 50rpx;
		/* border:4rpx solid red; */
		text-align: left;
	}
	.question1{
			display: inline-block;
			width: 50rpx;
			height: 45rpx;
			background-color: #1d3255;
			padding: 0 10rpx;
			color: #edc499;
			font-size: 30rpx;
	}
	.question2{
		margin-left:30rpx;
		color: #1c202c;
		font-size: 34rpx;
	}
	.question view{
		margin: 30rpx 0;
		font-size: 30rpx;
		color: #9e9e9e;
	}
	.procedure{
		margin: 40rpx 0;
		display: flex;
		text-align: center;
		padding-top: 20rpx;
	}
	.procedure view{
		flex: 1;
		height: 200rpx;
		/* border: 2rpx solid red; */
		padding: 0 42rpx;
		justify-content:center;
		border-right: 1px solid #e3e4e3;
	}
	.procedure view:nth-child(3){
		border: none;
		}
	.procedure view image{
		width: 80rpx;
		height: 80rpx;
	}
	.procedure view text{
		margin-top: 15rpx;
		display: block;
		color: #989898;
		font-size: 30rpx;
	}
	.submitbtn{
		width: 670rpx;
		height: 94rpx;
		background-color: #ED7D6B;
		color: #fff;
		border-radius: 10rpx;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}
</style>
